window.onload = function () {



    // 实现页面之间的切换
    var section = document.querySelector("section")
    var ul = document.querySelector('.navul');


    ul.children[0].addEventListener('click', function () {
        for (var j = 0; j < 6; j++) {
            if (section.children[j].style.display = 'block') {
                section.children[j].style.display = 'none';
            }
        }
        section.children[0].style.display = 'block';
    })
    ul.children[1].addEventListener('click', function () {
        for (var j = 0; j < 6; j++) {
            if (section.children[j].style.display = 'block') {
                section.children[j].style.display = 'none';
            }
        }
        section.children[1].style.display = 'block';
    })
    ul.children[2].addEventListener('click', function () {
        for (var j = 0; j < 6; j++) {
            if (section.children[j].style.display = 'block') {
                section.children[j].style.display = 'none';
            }
        }
        section.children[2].style.display = 'block';
    })
    ul.children[3].addEventListener('click', function () {
        for (var j = 0; j < 6; j++) {
            if (section.children[j].style.display = 'block') {
                section.children[j].style.display = 'none';
            }
        }
        section.children[3].style.display = 'block';
    })
    ul.children[4].addEventListener('click', function () {
        for (var j = 0; j < 6; j++) {
            if (section.children[j].style.display = 'block') {
                section.children[j].style.display = 'none';
            }
        }
        section.children[4].style.display = 'block';
    })
    piyingxi.addEventListener('click', function () {
        for (var j = 0; j < 6; j++) {
            if (section.children[j].style.display = 'block') {
                section.children[j].style.display = 'none';
            }
        }
        section.children[5].style.display = 'block';
    })


    var fanhui = document.getElementById('fanhui');
    fanhui.addEventListener('click', function () {
        section.children[5].style.display = 'none';
        section.children[0].style.display = 'block';

    })




    // 可见区域高度  
    var h6 = document.documentElement.clientHeight;
    var p1 = document.querySelector('.p1');
    p1.style.height = h6 + 'px';


    // 弹出动画
    function animate(obj, target) {
        // 先清除以前的定时器，只保留当前的一个定时器执行
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            //步长值写到定时器里面
            var step = (target - obj.offsetLeft) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if (obj.offsetLeft == target) {
                //停止动画
                clearInterval(obj.timer);
            }
            //把每次加1这个步长值改为一个慢慢变小的值，步长公式：（目标值-现在的位置）/10
            obj.style.left = obj.offsetLeft + step + 'px';
        }, 15);
    }




    // 点击分类，显示出分类框
    var classification = document.querySelector('.classification');
    var fl = document.querySelector('.fl');
    fl.addEventListener('click', function () {
        animate(classification, 0);
    })



    //滑动关闭分类框
    var startx = 0;//获取手指初始坐标
    var starty = 0;
    classification.addEventListener('touchstart', function (e) {
        startx = e.targetTouches[0].pageX;
        starty = e.targetTouches[0].pageY;
    })
    classification.addEventListener('touchmove', function (e) {
        var movex = e.targetTouches[0].pageX - startx;
        var movey = e.targetTouches[0].pageY - starty;
        if (movex < 0) {
            var w = document.documentElement.clientWidth / 2;
            animate(classification, -w);
        }
    })



    // 点击搜索，弹出搜索框
    var Search = document.querySelector('.Search');
    var title2 = document.querySelector('.title2');
    var shang = document.querySelector('.shang');
    var body = document.body

    title2.children[4].addEventListener('click', function () {
        animate(Search, 0);
        body.style.overflow = 'hidden';

    })
    shang.children[0].addEventListener('click', function () {
        var w = document.documentElement.clientWidth;
        animate(Search, w);
        body.style.overflow = 'auto';
    })

    // title2.children[1].addEventListener('click', function () {
    //     this.style.background = "url(../imgs/30.png) no-repeat -4px -17px";
    //     this.style.backgroundSize = '85px';
    //     this.style.color = '#fff';
    //     this.style.fontSize = '19px';
    // })









}

